<template>
    <e-container class="v-admin-sy">
        <el-row :gutter="30">
            <el-col :span="6">
                <div class="spboot-box">
                    <div class="icon">
                        <el-icon><Histogram /></el-icon>
                    </div>
                    <div class="title">
                        <div class="text">总订单数</div>
                        <div class="number">{{ shangpindingdanCount }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="spboot-box">
                    <div class="icon">
                        <el-icon><Money /></el-icon>
                    </div>
                    <div class="title">
                        <div class="text">今日订单数</div>
                        <div class="number">{{ todayCount }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="spboot-box">
                    <div class="icon">
                        <el-icon><Coin /></el-icon>
                    </div>
                    <div class="title">
                        <div class="text">总销售额</div>
                        <div class="number">￥{{ sxiaoshoueCount }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="spboot-box">
                    <div class="icon">
                        <el-icon><SoldOut /></el-icon>
                    </div>
                    <div class="title">
                        <div class="text">今日销售额</div>
                        <div class="number">￥{{ todayxiaoshoueCount }}</div>
                    </div>
                </div>
            </el-col>
        </el-row>



    </e-container>
    <div style="margin-top: 30px">
        <e-container>
            <v3-echarts :options="LineOptions" width="100%" height="300px"></v3-echarts>
        </e-container>
    </div>

</template>
<style type="text/scss" scoped lang="scss">
.spboot-box{
    display: flex;
    padding: 20px;
    background: #c4ddf8;
    text-align: center;
    align-items: center;
    margin-top: 10px;
    .icon{
        width: 80px;
        flex-grow: 0;
        flex-shrink: 0;
        font-size: 38px;

    }
    .title{
        flex-grow: 1;
        flex-shrink: 1;
        .number{
            font-size: 38px;
        }
    }
}

</style>
<script setup>
import config from "@/config";
import DB from "@/utils/db";
import date from "@/utils/date";

import { ref, reactive, watch, computed, unref } from "vue";
import {session} from "@/utils";
import {Histogram,SoldOut,Coin,Money} from '@element-plus/icons-vue'

var where = "1=1";
if(session('cx') == '用户'){
    where += " AND shangjia='"+session('username')+"' ";
}


const shangpindingdanCount = DB.name("shangpindingdan").where(where).countRef();
const todayCount = DB.name("shangpindingdan").where(where).where("to_days(addtime)=to_days(now())").countRef();

const sxiaoshoueCount = DB.name("shangpindingdan").where(where).sumRef("zongjia");
const todayxiaoshoueCount = DB.name("shangpindingdan").where(where).where("to_days(addtime)=to_days(now())").sumRef("zongjia");



const lists = ref([]);
const loadWeekTotal = async ()=>{
    var today = Date.now() / 1000 - 86400 * 7;
    var result = [];
    for ( var i=0 ; i <= 7 ;i++ ){
        var count = await DB.name("shangpindingdan").where(where).where("addtime",'between',[date('Y-m-d 00:00:00',today),date('Y-m-d 23:59:59',today)]).sum("zongjia");
        result.push({
            riqi:date('m-d',today),
            count:count
        });
        today+=86400;
    }
    lists.value = result;
}
loadWeekTotal();


const LineOptions = computed(() => {
    var list = unref(lists);
    return {
        title: {
            text: "最近7天销售额",
        },
        tooltip: {
            trigger: "axis",
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        toolbox: {
            feature: {
                saveAsImage: {},
            },
        },
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: list.map((s) => s.riqi),
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                name: "金额",
                type: "line",
                stack: "Total",
                data: list.map((s) => parseFloat(s.count)),
            },
        ],
    };
});


</script>
